<script setup lang="ts">
  import { useGetOrderTotalFee } from './service'
  import { computed, ref } from 'vue'
  import { RenderSettlement } from './types'
  import { CaretBottom, CaretRight } from '@element-plus/icons-vue'

  const props = defineProps({
    orderId: {
      type: String,
      required: true,
    },
    moduleId: {
      type: String,
      required: true,
    },
  })

  // 展开的面板
  const activeNames = ref(['order_total_fee'])

  // 使用工单总费用服务
  const { orderTotalFee, getOrderTotalFeeLoading, getOrderTotalFeeFn } = useGetOrderTotalFee()

  // 显示客户总费用的模块id
  const showCustomerTotalFeeModuleId = computed(() => {
    if (import.meta.env.DEV) {
      return '1828405355761844226'
    }
    return '1836989927687004162'
  })

  // 保留两位小数
  const saveTwoDecial = (param: number) => {
    return param.toFixed(2)
  }

  // 渲染的文本
  const renderData = computed(() => {
    const map = [
      props.moduleId === showCustomerTotalFeeModuleId.value
        ? 'collectCustomerPrice'
        : 'factoryFeeSettlement',
      'networkFeeSettlement',
      'engineerFeeSettlement',
      'platformFeeSettlement',
    ]

    let result: Array<RenderSettlement> = []

    if (!orderTotalFee.value) {
      return result
    }

    // 组装数据
    map.forEach((key) => {
      if (orderTotalFee.value[key]) {
        let __result = {
          allInclusiveFee: orderTotalFee.value[key].allInclusiveFee,
          orderSettlementPrice: orderTotalFee.value[key].orderSettlementPrice || 0,
          serviceFee: orderTotalFee.value[key].serviceFee || 0,
          spareFee: orderTotalFee.value[key].spareFee || 0,
          totalAmount: '',
        }

        __result.totalAmount = saveTwoDecial(
          __result.orderSettlementPrice + __result.spareFee + __result.serviceFee,
        )
        Object.assign(__result, {
          orderSettlementPrice: saveTwoDecial(__result.orderSettlementPrice),
          serviceFee: saveTwoDecial(__result.serviceFee),
          spareFee: saveTwoDecial(__result.spareFee),
        })

        result.push(__result)
      } else {
        result.push({
          allInclusiveFee: false,
          orderSettlementPrice: '0.00',
          serviceFee: '0.00',
          spareFee: '0.00',
          totalAmount: '0.00',
        })
      }
    })

    return result
  })

  /**
   * 获取数据方法
   */
  const getData = async () => {
    await getOrderTotalFeeFn(props.orderId)
  }

  defineExpose({
    getData,
  })
</script>

<template>
  <div class="order_total_fee">
    <el-collapse v-model="activeNames">
      <el-collapse-item name="order_total_fee" v-loading="getOrderTotalFeeLoading">
        <template #title>
          <div style="box-sizing: border-box; display: flex; gap: 5px; align-items: center">
            <el-icon>
              <template v-if="activeNames.includes('order_total_fee')">
                <CaretBottom />
              </template>
              <template v-else>
                <CaretRight />
              </template>
            </el-icon>
            <span>工单总费用</span>
          </div>
        </template>
        <div class="order-total-fee">
          <table>
            <thead>
              <tr>
                <th>{{ showCustomerTotalFeeModuleId === props.moduleId ? '客户' : '品牌商家' }}</th>
                <th>服务商</th>
                <th>工程师</th>
                <th>平台承担</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td v-for="(data, index) in renderData" :key="index">
                  <div class="flex_column">
                    <div class="flex">
                      <div class="title">工单结算价：</div>
                      <div>￥{{ data.orderSettlementPrice }}</div>
                    </div>
                    <div class="flex" v-if="data.allInclusiveFee">
                      <div class="title">异常费用：</div>
                      <div>￥{{ data.serviceFee }}</div>
                    </div>
                    <div class="flex" v-else>
                      <div class="title">服务费：</div>
                      <div>￥{{ data.serviceFee }}</div>
                    </div>
                    <div class="flex">
                      <div class="title">配件费：</div>
                      <div>￥{{ data.spareFee }}</div>
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td v-for="(data, index) in renderData" :key="index" style="border-top: none">
                  <div class="flex_column">
                    <div class="flex">
                      <div class="title">合计：</div>
                      <div style="color: #f56c6c">￥{{ data.totalAmount }}</div>
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<style scoped lang="scss">
  .order_total_fee {
    padding: 0 12px;
    background-color: #fff;

    :deep(.el-collapse) {
      border-top: none !important;
      border-bottom: none !important;
    }

    :deep(.el-collapse-item__wrap) {
      border-bottom: none !important;
    }

    table {
      width: 100%;
      height: 100%;
      border-collapse: collapse;

      tr {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4, 1fr);

        th {
          height: 38px;
          background-color: rgb(245, 247, 250, 1);
          display: flex;
          justify-content: center;
          align-items: center;
        }

        td {
          padding: 10px;
        }
      }
    }

    td,
    th {
      border-top: 1px solid rgba(#ebeef5, 1);
      border-left: 1px solid rgba(#ebeef5, 1);
    }

    td:last-child,
    .th:last-child {
      border-right: 1px solid rgba(#ebeef5, 1);
    }

    td {
      border-bottom: 1px solid rgba(#ebeef5, 1);
    }

    .flex_column {
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      .flex {
        display: flex;

        .title {
          width: 72px;
          text-align: right;
          white-space: nowrap;
        }
      }
    }
  }
</style>
